<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>产品信息显示</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../assets/css/layui.css" media="all">

	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<div id="addForm" style="display: none">
	<form class="layui-form" action="" lay-filter="test1">
		<div class="layui-form-item">
			<label class="layui-form-label">产品编号</label>
			<div class="layui-input-block">
				<input type="text" name="pid" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库编号" class="layui-input" id="addpid">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">产品名</label>
			<div class="layui-input-block">
				<input type="text" name="pname" lay-verify="title"
					   autocomplete="off" placeholder="请输入仓库容量" class="layui-input" id="addpname">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">产品描述</label>
			<div class="layui-input-block">
				<input type="text" name="pdescribe" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input" id="addpdescribe">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">产品图片</label>
			<div class="layui-input-block">
				<input type="text" name="ppicture" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input" id="addppicture">
			</div>
		</div>

		<div class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">中文版</label>
					<div class="layui-input-inline">
						<input class="layui-input" id="test11" type="text" placeholder="yyyy-MM-dd">
					</div>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">产品内容</label>
			<div class="layui-input-block">
				<input type="text" name="ptype" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input" id="addptype">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">产品开发团队名称</label>
			<div class="layui-input-block">
				<input type="text" name="pteam" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input" id="addpteam">
			</div>
		</div>

	</form>
</div>

<body>

<div class="demoTable">

	搜索ID：
	<div class="layui-inline">
		<input class="layui-input" name="id" id="demoReload"
			   autocomplete="off">
	</div>
	<button class="layui-btn" data-type="reload">搜索</button>
	<button class="layui-btn " id="addgs" lay-filter="addgs">新增仓库</button>

</div>

<table class="layui-hide layui-card-body" lay-filter="test" id="test"></table>


<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<div id="updateForm" style="display: none">
	<form class="layui-form" action="" lay-filter="test1">
		<div class="layui-form-item">
			<label class="layui-form-label">产品编号</label>
			<div class="layui-input-block">
				<input type="text" readonly name="pid" style="border:none;font-weight:bold;font-size:20px"    class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">产品名</label>
			<div class="layui-input-block">
				<input type="text" name="pname" lay-verify="title"
					   autocomplete="off" placeholder="请输入仓库容量" class="layui-input" >
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">产品描述</label>
			<div class="layui-input-block">
				<input type="text" name="pdescribe" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">产品图片</label>
			<div class="layui-input-block">
				<input type="text" name="ppicture" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input">
			</div>
		</div>

		<div class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">中文版</label>
					<div class="layui-input-inline">
						<input class="layui-input" id="test1" name="ptime" type="text" placeholder="yyyy-MM-dd">
					</div>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">产品内容</label>
			<div class="layui-input-block">
				<input type="text" name="ptype" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">团队名称</label>
			<div class="layui-input-block">
				<input type="text" name="pteam" lay-verify="title" autocomplete="off"
					   placeholder="请输入仓库地址" class="layui-input">
			</div>
		</div>



		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit lay-filter="*">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>





<script src="../assets/layui.js" charset="utf-8"></script>

<script src="../assets/jquery-3.4.1.min.js" charset="utf-8"></script>

<script>


    layui.use([ 'form', 'table', 'layer','laydate' ], function() {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#test1'
			,type:'date'
			,trigger:'click'
        });
        laydate.render({
            elem: '#test11'
            ,type:'date'
            ,trigger:'click'
        });



        var table = layui.table;
        var ktab = table.render({
            elem : '#test',
            url : '/dept/showDept',
            cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,
            cols : [ [ {
                field : 'pid',
                width : 100,
                title : '产品编号',
                sort : true
            }, {
                field : 'pname',
                width : 100,
                title : '产品名称'
            }, {
                field : 'pdescribe',
                width : 100,
                title : '产品描述',
                sort : true
            }, {
                field : 'ppicture',
                width : 100,
                title : '产品图片',
                sort : true
            }, {
                field : 'ptime',
                width : 100,
                title : '产品发布时间',
                sort : true
            }, {
                field : 'ptype',
                width : 100,
                title : '产品内容',
                sort : true
            }, {
                field : 'pteam',
                width : 100,
                title : '团队名称',
                sort : true
            },{
                title : '操作',
                toolbar : "#barDemo"
            } ] ],
            page : true,
            id : 'testReload'
        });

        var $ = layui.$, active = {
            reload : function() {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page : {
                        curr : 1
                        //重新从第 1 页开始
                    },
                    where : {
                        id : demoReload.val()
                    }
                }, 'data');
            }
        };


        $("#addgs").click(function () {
            var ulayer = layer.open({
                type: 1
                ,offset: 'auto'
                ,id: 'layerDemo'//防止重复弹出
                ,content: $("#addForm")
                ,btn: ['添加', '取消']
                ,end:function(){

                    location.reload();

                }
                ,btnAlign: 'c' //按钮居中
                ,shade: 0 //不显示遮罩
                ,btn1: function(){
                    $.ajax({
                        type:'post'
                        ,url:'/dept/addDept'
                        ,data:{"pid":""+$('#addpid').val()+"","pname":""+$('#addpname').val()+"","pdescribe":""+$('#addpdescribe').val()+"","ppicture":""+$('#addppicture').val()+"","ptime":""+$('#test11').val()+"","ptype":""+$('#addptype').val()+"","pteam":""+$('#addpteam').val()+""}
                        ,success:function (d){
                            layer.close(ulayer);
                            if(d == 1){

                                layer.msg('您的添加操作已成功！！！',{icon: 1,time:500}, function(){
                                    //do something
                                    ktab.reload();
                                    //关闭layer.open
                                    location.reload();
                                });

                            }
                        }

                    });
                }
                ,btn2: function(index, layero){
                    layer.closeAll();
                }
            });
        });





        $('.demoTable .layui-btn').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            console.log(data);
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                layer.msg('ID：' + data.pid + ' 的查看操作');
            } else if ("del" === layEvent) {

                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type:'delete'
                        ,url:"/dept/delDept/"+ data.pid +""
                        ,success:function (d){
                            if(d == 1){
                                layer.msg('您的删除已成功！！！',{icon: 1,time:500}, function(){
                                    //do something
                                    ktab.reload();
                                    layer.close(index);
                                    //关闭layer.open
                                });
                                //table刷新
                            }
                        }
                    });
                });



            } else if ("edit" === layEvent) {

                var ulayer = layer.open({
                    type : 1,
                    title : '卧槽无情' //不显示标题栏
                    ,
                    area : [ '350px', '300px' ],
                    shade : [ 0.8, '#393D49' ],
                    id : 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btnAlign : 'c',
                    moveType : 1 //拖拽模式，0或者1
                    ,
                    content : $("#updateForm")
                    ,success : function(layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href : 'http://www.layui.com/',
                            target : '_blank'
                        });
                    }
                });
                /* form.val("test1", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                 "sno": data.sno // "name": "value"
                  ,"sname": data.sname
                 ,"age": data.age
                 ,"sex": data.sex
                });*/
                $("form input[name='pid']").val(data.pid);
                $("form input[name='pname']").val(data.pname);
                $("form input[name='pdescribe']").val(data.pdescribe);
                $("form input[name='ppicture']").val(data.ppicture);
                $("form input[name='ptime']").val(data.ptime);
                $("form input[name='ptype']").val(data.ptype);
                $("form input[name='pteam']").val(data.pteam);

                form.on('submit(*)', function(data) {
                    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    $.ajax({
                        type : 'post',
                        url : '/dept/updateDept',
                        data : data.field,
                        success : function(d) {
                            layer.close(ulayer);

                            if (d == 1) {
                                layer.msg('您的修改已成功！！！', {
                                    icon : 1,
                                    time : 500
                                }, function() {
                                    //do something
                                    ktab.reload();
                                    //关闭layer.open
                                });
                                //table刷新
                            }
                        }
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

            }









        });

    });


</script>

</body>
</html>


